const appVideoEditBtn = (h, param, vm) => {
    return h('Button', {
        props: {
            type: "primary",
            icon: 'edit',
        },
        style: {
            'margin-right': '10px',
        },
        on: {
            click: () => {
                vm.selectVideo = param.row;
                vm.selectVideo._index = param.index;
                vm.appVideoForm.isShow = param.row.is_show == '1'?true:false;
                vm.appVideoForm.live_programme_uuid = param.row.live_programme_uuid;
                vm.appVideoForm.homepage_recommend_video_tag_code = param.row.homepage_recommend_video_tag_code;
                vm.appVideoForm.orders = param.row.orders;

                vm.showModal = true;
            }
        }
    }, '编辑')
}
const appVideoDeleteBtn = (h, param, vm) => {
    return h(
        "Poptip", {
            props: {
                confirm: true,
                title: "确定要删除视频?",
                transfer: true
            },
            on: {
                "on-ok": () => {
                    vm.deleteAppVideo(param.row)
                }
            }
        }, [
            h('Button', {
                class: 'refund-btn',
                props: {
                    type: "error",
                    icon: 'trash-b',
                    disabled: param.row.is_use == '1'
                },
                on: {
                    click: () => {

                    }
                }
            }, '删除')
        ]
    )
}

export default {
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            appVideoTableColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            }, {
                'title': '名称',
                'align': 'center',
                'key': 'name',
            },{
                'title': '显示',
                'align': 'center',
                'key': 'is_show',
                'width': 90

            }, {
                'title': '推荐标签',
                'align': 'center',
                'key': 'type_name',
                'width': 100
            }, {
                'title': '创建时间',
                'align': 'center',
                'key': 'createtime',
                'width': 200

            }, {
                'title': '排序',
                'align': 'center',
                'key': 'orders',
                'width': 80

            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true,
                'width': 200

            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            showModal: false,
            modalLoading: true,
            appVideoList: [],
            selectVideo: '',
            allFinishVideoList:[],
            appVideoForm: {
                live_programme_uuid: '',
                homepage_recommend_video_tag_code:'',
                isShow: true,
                orders:1
            },
            appVideoFormRules: {
                homepage_recommend_video_tag_code:[{
                    required: true, message: '请选择一个类型', trigger: 'change'
                }],
                live_programme_uuid:[{
                    required: true, message: '请选择一个类型', trigger: 'change'
                }]
            },
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        // doSearch() {
        //     this.pageNum = 1;
        //     this.getAskingOrderList();
        // },
        // clearSearch() {
        //     this.searchKey = '';
        //     this.pageNum = 1;
        //     this.getAskingOrderList();
        // },
        changePage(num) {
            this.pageNum = num;
            this.getAskingOrderList();
            document.querySelector('.single-page-con').scrollTo(0, 0)
        },
        doGetVideoList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetAppVideoListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.appVideoList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        getAllFinishVideo(){
            this.http.post(this.postUrl.getAllFinishVideo, {
                token: this.user.tokenList[0]
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.allFinishVideoList = JSON.parse(JSON.stringify(data.data));
                }
            })
        },
        clickOK() {
            this.changeLoadingStatus(true)
            this.$refs.appVideoForm.validate(valid=>{
                if(!valid){
                    this.changeLoadingStatus(false)
                    return
                }
                let postData = JSON.parse(JSON.stringify(this.appVideoForm));
                postData.token = this.user.tokenList[0];
                postData.is_show = this.appVideoForm.isShow?'1':'0';
                if (this.selectVideo) {
                    postData.uuid = this.selectVideo.uuid;
                }
                delete postData.isShow

                this.http.post(this.postUrl.doAddOrEditAppVideo, postData).then((data) => {
                    if (data.code > -1) {
                        this.$Notice.success({
                            title: this.selectVideo ? '修改成功！' : '新增成功！'
                        })
                        this.showModal = false;
                        this.doGetVideoList();
                    } else {
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                }, () => {
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        deleteAppVideo(param) {
            this.http.post(this.postUrl.doDeleteAppVideoUrl, {
                token: this.user.tokenList[0],
                uuid: param.uuid
            }).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.doGetVideoList()
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        },
        recommendVideoTagChange(e){
            console.log(e);
        }
    },
    created() {
        this.appVideoTableColumns.forEach(item => {
            if (item.key == 'is_show') {
                item.render = (h, param) => {
                    return h('Icon', {
                        props: {
                            type: param.row.is_show == '1' ? 'checkmark-circled' : 'close-circled',
                            size: 16,
                            color: param.row.is_show == '1' ? "#00a854" : '#f04134'
                        }
                    })
                }
            }
            if (item.action) {
                item.render = (h, param) => {
                    return h('div', [
                        appVideoEditBtn(h, param, this),
                        appVideoDeleteBtn(h, param, this)
                    ])
                };

            }
        })
        if (this.user) {
            this.doGetVideoList()
            this.getAllFinishVideo()
        }
    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.doGetVideoList()
                this.getAllFinishVideo()

            }
        },
        showModal(val) {
            if (!val) {
                setTimeout(() => {
                    this.appVideoForm = {
                        live_programme_uuid: '',
                        homepage_recommend_video_tag_code:'',
                        isShow: true,
                        orders:1
                    }
                }, 300)
                this.$refs.appVideoForm.resetFields()

            }
        }

    }
}
